<template>
  <main class="grid-setting">
    <div class="vld-parent">
      <loading :active.sync="isLoading"></loading>
    </div>
    <section class="container-fluid container-lg">

      <div class="row introduction mb-12">
        <div class="col-sm-1 introduction__tab pr-0 position-absolute z-index-2
          mt-2 mt-sm-3 mt-md-0" >
          <ul class="nav d-flex flex-column justify-content-center h-100"
            id="tab" role="tablist">
            <li class="text-md-right" role="presentation">
              <a class="active" id="flower_1-tab" href="#flower_1" role="tab"
                data-toggle="pill" aria-controls="flower_1" aria-selected="true">
                <img class="introduction__tab__img img-cover ml-2 ml-sm-3 ml-md-0 mb-2 mb-md-3"
                  :src="item.imageUrl" :alt="item.name">
              </a>
            </li>
            <!-- <li class="text-md-right" role="presentation">
              <a id="flower_2-tab" data-toggle="pill" href="#flower_2"
                role="tab" aria-controls="flower_2" aria-selected="false">
                <img class="introduction__tab__img img-cover ml-2 ml-sm-3 ml-md-0 mb-2 mb-md-3"
                  src="https://storage.googleapis.com/vue-course-api.appspot.com/aimer%2F1600776218281.jpg?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&amp;Expires=1742169600&amp;Signature=bb4q9fCmnEvHyMjgLHiaTeqZre4En6qM34tmmA5nfu88fVPug8KKRjhwkDly%2FMOEij7xNXlFHlG5GJSZurRh%2FQiVHXtSo4kvS4ObZacje%2FlHyzfDltIIT6N%2Bhy9oGOiAw%2FSGLe5fqyiBbsIaM7bevfbXn4g8j9k%2B1Ql3oHul4cBk58YLojMELcX8CNqomYcLa0xNLFvFRXVtA74LLbn13DKVzJ89Kxch51PTDhhWSIxm7VxubLZ6VoUYlQC8b%2FABIDiwOTrBn9kMuo2KhSLLsh2wka1nO%2FVRMaSrUbn%2BWOuQe5eag6Ak2YAOQuG0mcWfAIUYKfqXP%2FLTOm3bv2FQ8A%3D%3D" alt="金輝玫瑰">
              </a>
            </li>
            <li class="text-md-right" role="presentation">
              <a id="flower_3-tab" data-toggle="pill" href="#flower_3"
                role="tab" aria-controls="flower_3" aria-selected="false">
                <img class="introduction__tab__img img-cover ml-2 ml-sm-3 ml-md-0 mb-2 mb-md-3"
                  src="https://storage.googleapis.com/vue-course-api.appspot.com/aimer%2F1600770263193.jpg?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&amp;Expires=1742169600&amp;Signature=WQTPZ3lFtzjEboFhnBQenqE9X8Lh7Poc2aSiorro5lnax5Z2820b%2BgOYyWtZDhnUAq4g0XJzr0O2832DXG%2Bl9ua8I38T0Wln74F6M3lqFVcINZwq%2Bq86bAw894imNq%2BgHNEXLctbhE5HzvHRjbiT9iE265tqvh8dZLeqvDKI4yDjG62ydRWBP6fMSdVF4v7Dk0ddcQt1%2FGmbHIDvIa17K4LDtepMyrEi3aUxGLozvr3yTzTwZZIwmezEnHGQGJ3u4d0TRN4Z170JM%2BGo23SjX2PLqD%2FSaCKCrAE4QyhYgd8139Co8wKSGJHAAYFyO%2Bo%2Fi7aO9hO%2FFhF599fK%2FjJojw%3D%3D" alt="紅脣"></a>
            </li>
            <li class="text-md-right" role="presentation">
              <a id="flower_4-tab" data-toggle="pill" href="#flower_4"
                role="tab" aria-controls="flower_4" aria-selected="false">
                <img class="introduction__tab__img img-cover ml-2 ml-sm-3 ml-md-0 mb-2 mb-md-3"
                  src="https://storage.googleapis.com/vue-course-api.appspot.com/aimer%2F1600778499805.jpg?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&amp;Expires=1742169600&amp;Signature=Pb7%2B3SizYU160KVhzpwJfilCe6j0VKDYfz%2Ff%2FKq%2F%2FGe9NUZY6o6PWI74hiHL8rPsJzFozwWikzvbPtd6ovPobhslmxWddB%2Fq9%2B1Wigpe6Fj6U%2F2KYTlM0YQJvaaBUU3R9uiibh36DU62ofv6UOjLr1%2FuTfrMUvpEYrDiZtHE61bU0a4UC3Flk8tpErCbp9o67UFtQaWuzX7XGM3%2BsH2nSDcwEUiMI13dvqFG8AckhmgY2RnSX7TyyNZ6O25oEmDnV%2FgIA9XB8u64%2FLb%2BEyHRI8xy2E1H8bXXjf1cgYMS8NX1laTtkYfW7wonSFLAZFL4o5pmiyty0ITjOICD5s7XYg%3D%3D" alt="香檳玫瑰"></a>
            </li> -->
          </ul>
        </div>
        <div class="col-sm-6 mb-3 mb-sm-0" >
          <div class="tab-content position-relative" id="tabContent">
            <div class="tab-pane fade show active" id="flower_1"
              role="tabpanel" aria-labelledby="flower_1-tab">
              <div class="introduction__img bg-cover"
                :style="`background-image: url(${ item.imageUrl });`">
              </div>
            </div>
            <div class="tab-pane fade" id="flower_2" role="tabpanel"
              aria-labelledby="flower_2-tab">
              <div class="introduction__img bg-cover"
                style="background-image: url(https://storage.googleapis.com/vue-course-api.appspot.com/aimer%2F1600776218281.jpg?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&amp;Expires=1742169600&amp;Signature=bb4q9fCmnEvHyMjgLHiaTeqZre4En6qM34tmmA5nfu88fVPug8KKRjhwkDly%2FMOEij7xNXlFHlG5GJSZurRh%2FQiVHXtSo4kvS4ObZacje%2FlHyzfDltIIT6N%2Bhy9oGOiAw%2FSGLe5fqyiBbsIaM7bevfbXn4g8j9k%2B1Ql3oHul4cBk58YLojMELcX8CNqomYcLa0xNLFvFRXVtA74LLbn13DKVzJ89Kxch51PTDhhWSIxm7VxubLZ6VoUYlQC8b%2FABIDiwOTrBn9kMuo2KhSLLsh2wka1nO%2FVRMaSrUbn%2BWOuQe5eag6Ak2YAOQuG0mcWfAIUYKfqXP%2FLTOm3bv2FQ8A%3D%3D);">
              </div>
            </div>
            <div class="tab-pane fade" id="flower_3" role="tabpanel" aria-labelledby="flower_3-tab">
              <div class="introduction__img bg-cover"
                style="background-image: url(https://storage.googleapis.com/vue-course-api.appspot.com/aimer%2F1600770263193.jpg?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&amp;Expires=1742169600&amp;Signature=WQTPZ3lFtzjEboFhnBQenqE9X8Lh7Poc2aSiorro5lnax5Z2820b%2BgOYyWtZDhnUAq4g0XJzr0O2832DXG%2Bl9ua8I38T0Wln74F6M3lqFVcINZwq%2Bq86bAw894imNq%2BgHNEXLctbhE5HzvHRjbiT9iE265tqvh8dZLeqvDKI4yDjG62ydRWBP6fMSdVF4v7Dk0ddcQt1%2FGmbHIDvIa17K4LDtepMyrEi3aUxGLozvr3yTzTwZZIwmezEnHGQGJ3u4d0TRN4Z170JM%2BGo23SjX2PLqD%2FSaCKCrAE4QyhYgd8139Co8wKSGJHAAYFyO%2Bo%2Fi7aO9hO%2FFhF599fK%2FjJojw%3D%3D);">
              </div>
            </div>
            <div class="tab-pane fade" id="flower_4" role="tabpanel" aria-labelledby="flower_4-tab">
              <div class="introduction__img bg-cover"
                style="background-image: url(https://storage.googleapis.com/vue-course-api.appspot.com/aimer%2F1600778499805.jpg?GoogleAccessId=firebase-adminsdk-zzty7%40vue-course-api.iam.gserviceaccount.com&amp;Expires=1742169600&amp;Signature=Pb7%2B3SizYU160KVhzpwJfilCe6j0VKDYfz%2Ff%2FKq%2F%2FGe9NUZY6o6PWI74hiHL8rPsJzFozwWikzvbPtd6ovPobhslmxWddB%2Fq9%2B1Wigpe6Fj6U%2F2KYTlM0YQJvaaBUU3R9uiibh36DU62ofv6UOjLr1%2FuTfrMUvpEYrDiZtHE61bU0a4UC3Flk8tpErCbp9o67UFtQaWuzX7XGM3%2BsH2nSDcwEUiMI13dvqFG8AckhmgY2RnSX7TyyNZ6O25oEmDnV%2FgIA9XB8u64%2FLb%2BEyHRI8xy2E1H8bXXjf1cgYMS8NX1laTtkYfW7wonSFLAZFL4o5pmiyty0ITjOICD5s7XYg%3D%3D);">
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-5 d-flex flex-column justify-content-center
          position-relative px-6 px-md-5" >
          <div class="border-bottom pb-3 pb-md-5 mb-3 mb-md-5">
            <h3 class="font-sm font-h6-md text-primary font-weight-normal
              d-flex justify-content-between pr-md-4">{{ item.category }}
              <!-- <span class="h6 favorite text-danger-500 hover--enlarge shadow-black-30"
                v-if="!isFavorite(item.id)"
                @click.prevent="
                  addFavorite(item.id, item.name, item.oldPrice, item.imageUrl)">
                <i class="far fa-heart font-h5"></i></span>
              <span class="h6 favorite text-danger-500 hover--enlarge shadow-black-30"
                v-if="isFavorite(item.id)"
                @click.prevent="removeFavorite(item.id)">
                <i class="fas fa-heart font-h5"></i> -->
                <span  class="h6 favorite text-danger-500 hover--enlarge shadow-black-30"
                 ref="one"  href="#"
                @click.prevent="stars(item)">
                  <i :class=" item.isStars ? 'fas fa-heart fa-lg' : 'far fa-heart fa-lg'"></i>
                </span>
            </h3>
            <h2 class="h4 font-h3-md mb-2 text-dark text-letter-spacing-3">
              {{ item.name }}</h2>
            <p class="font-sm font-h6-md text-secondary text-truncate">
              {{ item.content }}
            </p>
          </div>
          <div class="row no-gutters">
            <div class="col-md-7 pr-4 d-flex flex-column justify-content-end mb-2 mb-md-0">
              <div class="text-right mr-lg-4">
                <p class="text-secondary text-decoration-del">
                  原价
                  <span class="font-weight-bold ml-4 mr-2">
                    NT {{ item.oldPrice }}</span>
                  元
                </p>
              </div>
              <p class="text-right text-secondary mr-lg-4">
                售价
                <span class="h5 font-h4-md font-family-roboto text-danger-500
                  ml-4 mr-2">NT {{ item.newPrice }}</span>
                元
              </p>
            </div>
            <div class="col-md-5">
              <div class="input-group mb-2">
                <div class="input-group-prepend">
                  <a href="#" class="btn btn-light font"
                    :class="{ 'disabled': cart.num === 1 }"
                    @click.prevent="cart.num = cart.num - 1">
                    <i class="fas fa-minus"></i></a>
                </div>
                <input type="number" min="1" max="15" value="1"
                  class="form-control text-center border-light"
                  v-model.number="cart.num">
                <div class="input-group-append">
                  <a href="#" class="btn btn-light"
                    :class="{ 'disabled':cart.num === 15 }"
                    @click.prevent="cart.num = cart.num - 0 + 1">
                    <i class="fas fa-plus"></i></a>
                </div>
              </div>
              <button class="btn btn-block btn-danger-500 hover--doublePulse" type="button"
                @click="addCart(item.id)">
                <span >加入购物车</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12 text-center mb-12">
          <h4 class="font-h5 font-h4-xs font-weight-normal font-italic text-letter-spacing-3 mb-5"
            >
            Flower Meanings
            <span class="font-xs font-h6-xs"> [花语]</span></h4>
          <p class="mb-1" >
            花不只美丽，<span class="d-sm-none"><br></span>
            花语更能给予花朵不一样的浪漫气息</p>
          <p >
            {{ item.name }}的花语象征着，
            <span class="d-sm-none"><br></span>{{ item.content }}</p>
        </div>
        <div class="col-4 col-md-3 mx-md-4 mx-lg-6" >
          <img class="img-cover img-fluid" src="../../assets/images/detail/2.jpg" alt="花瓶與花">
        </div>
        <div class="col-8 mt-8 mt-md-15 ml-md-4 ml-lg-6 mb-15" >
          <img class="img-cover img-fluid mt-lg-4" alt="结婚与花束"
            src="../../assets/images/detail/1.jpg" >
        </div>
      </div>
      <!-- Particular -->
      <div class="row particular justify-content-center justify-content-md-start
        position-relative mb-12 mb-md-15">
        <div class="particular__inner d-flex flex-column justify-content-center
          h-100 mb-6 mr-md-4 text-center z-index-2"
           >
          <h4 class="font-h4 font-h3-xs font-weight-normal font-italic text-letter-spacing-3 mb-5">
            Particular
            <span class="font-xs font-h6-xs">[特色]</span>
          </h4>
          <p v-if="item.description">
            {{ item.description }}
          </p>
        </div>
        <div class="col-md-7 col-lg-8" >
          <img class="img-fluid" src="../../assets/images/detail/3.jpg" alt="粉色玫瑰花">
        </div>
      </div>
    </section>
    <!-- bigImage -->
    <div class="container-fluid bg-gradual mb-8 mb-md-12">
      <div class="row no-gutters justify-content-center pb-15 position-relative">
        <div class="col-12 text-center mb-4 mb-sm-5">
          <h2 class="font-h5 font-h4-xs font-weight-normal font-italic text-letter-spacing-3">
            Queen's Day
            <span class="d-sm-none"><br></span>
            <span class="font-xs font-h6-xs">[{{ item.name }}]</span></h2>
        </div>
        <div class="col-10 col-md-8 col-xl-6 bg-cover detail__bigImg"
          :style="`background-image: url( ${ item.imageUrl });`"
          :alt="item.name">
        </div>
      </div>
    </div>
    <!-- Recommend -->
    <section class="container recommend mb-2 mb-md-8">
      <div class="row">
        <div class="col-12 mb-4 mb-sm-7 mb-lg-8 px-0">
          <h5 class="recommend__title h4 font-h3-md text-warning
            d-inline-block bg-white px-2 px-sm-4 px-md-6 ml-6 ml-md-12">Recommend</h5>
        </div>
        <RecommendProducts/>
      </div>
    </section>
  </main>
</template>

<script>
import RecommendProducts from '@/components/RecommendProducts.vue'
export default {
  components: {
    RecommendProducts
  },
  data () {
    return {
      isLoading: false,
      item:[],
      cart:{
         num: "1",
         userId: this.$bus.USER_Id,
         itemId: ''
      }
    }
  },
  methods:{
    async addCart(itemId){
      this.cart.itemId =itemId
      // let num = 1
      // let userId = this.$bus.USER_Id
      const{data: result} = await this.$http.post("/cart/addCart",this.cart)
      if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
      if(result.status === 200) this.$parent.fresh()
    },
    productLink (id) {

    },
    async addFavorite(itemId){
      const{data: result} = await this.$http.post("/stars/add",{userId: this.$bus.USER_Id , itemId: itemId }  )
      if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
      if(result.status === 200) this.$parent.fresh()
    },
    async removeFavorite(itemId,userId){
      const{data: result} = await this.$http.delete("/stars/"+userId+"/"+itemId)
      if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
      if(result.status === 200) this.$parent.fresh()
    },
    stars(item){
     if(!item.isStars){
        this.addFavorite(item.id)
     }else{
        this.removeFavorite(item.id,this.$bus.USER_Id)
     }
     item.isStars= !item.isStars
    },
    async getItem(itemId) {
      let url = null
      if(this.$bus.USER_Id != null ) {
        url = itemId +  "/" +this.$bus.USER_Id
      }else {
        url = itemId
      }
      const{data: result} = await this.$http.get("/item/"+url)
      if(result.status !== 200) return this.$message.error("左侧菜单查询失败")
      this.item = result.data
    }
  },
  created() {
    this.getItem(this.$route.params.itemId)
  }
}
</script>
